<template>
    <el-config-provider :locale="zhCn">
        <el-container class="min-h-screen bg-gray-50">
            <!-- 头部 -->
            <el-header class="bg-white shadow-sm sticky top-0 z-100">
                <div class="container mx-auto flex items-center justify-between px-24 py-16">
                    <div class="flex items-center gap-12">
                        <span class="i-carbon-book text-24 text-brand"></span>
                        <h1 class="text-22 md:text-24 font-700">项目使用说明文档</h1>
                    </div>
                    <div class="flex items-center gap-12">
                        <el-button
                            type="primary"
                            @click="scrollToTop"
                            class="text-14"
                        >
                            <span class="i-carbon-arrow-up mr-4"></span>
                            返回顶部
                        </el-button>
                    </div>
                    <div class="flex items-center gap-12">
                        <el-button
                            type="primary"
                            @click="toggleTheme"
                            class="text-14"
                        >
                            <span class="i-carbon-arrow-up mr-4"></span>
                            {{ isDark ? "亮色模式" : "暗黑模式" }}
                        </el-button>
                    </div>
                </div>
            </el-header>

            <el-main>
                <div class="container mx-auto px-24 py-32">
                    <!-- 第一部分：项目结构介绍 -->
                    <el-card class="mb-24 shadow-sm">
                        <template #header>
                            <div class="flex items-center gap-8">
                                <span class="i-carbon-tree-view-alt text-20 text-brand"></span>
                                <span class="text-18 font-700">一、项目结构介绍</span>
                            </div>
                        </template>
                        <div class="text-14 leading-relaxed space-y-16">
                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">目录结构</h3>
                                <pre
                                    class="rounded-8 bg-gray-100 p-16 text-13 overflow-auto border border-gray-200"
                                ><code>src/
├── assets/                    # 静态资源目录
│   ├── font/                  # 字体文件
│   ├── iconfont/              # 图标字体
│   ├── styles/                # 全局样式文件
│   │   ├── theme.css          # 主题变量定义
│   │   └── element-overrides.css  # Element Plus 样式覆盖
│   └── utils/                 # 工具函数
│       └── rem.ts             # rem 适配方案
├── server/                    # API 相关
│   ├── api/                   # 接口定义
│   │   ├── base.ts            # 基础接口
│   │   └── base.type.ts       # 接口类型定义
│   ├── http.ts                # Axios 实例配置
│   ├── global.type.ts         # 全局类型定义
│   ├── error-handler.ts       # 错误处理工具
│   └── index.ts               # 统一导出
├── router/                    # 路由配置
│   └── index.ts
├── types/                     # TypeScript 类型定义
│   ├── auto-imports.d.ts      # 自动导入类型
│   └── components.d.ts        # 组件类型
├── components/                # 组件目录
├── pages/                     # 页面目录
├── App.vue                    # 根组件
└── main.ts                    # 入口文件

项目根目录/
├── uno.config.ts              # UnoCSS 配置
├── vite.config.ts             # Vite 配置
├── postcss.config.cjs         # PostCSS 配置（px转rem）
└── package.json</code></pre>
                            </div>

                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">核心文件说明</h3>
                                <el-descriptions
                                    :column="1"
                                    border
                                    class="mt-12"
                                >
                                    <el-descriptions-item label="main.ts">
                                        <span class="text-13"
                                            >应用入口，配置 Vue 实例、路由、全局样式和工具引入</span
                                        >
                                    </el-descriptions-item>
                                    <el-descriptions-item label="server/http.ts">
                                        <span class="text-13"
                                            >Axios 实例配置，包含请求/响应拦截器，支持 JSON 和
                                            FormData 两种格式</span
                                        >
                                    </el-descriptions-item>
                                    <el-descriptions-item label="server/index.ts">
                                        <span class="text-13"
                                            >统一导出所有 API
                                            接口、类型和工具函数，方便统一管理</span
                                        >
                                    </el-descriptions-item>
                                    <el-descriptions-item label="assets/utils/rem.ts">
                                        <span class="text-13"
                                            >响应式 rem 适配方案，基于设计稿
                                            1920px，自适应不同屏幕尺寸</span
                                        >
                                    </el-descriptions-item>
                                    <el-descriptions-item label="uno.config.ts">
                                        <span class="text-13"
                                            >UnoCSS 配置，定义主题色、间距、图标等原子类规则</span
                                        >
                                    </el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </div>
                    </el-card>

                    <!-- 第二部分：全局样式配置 -->
                    <el-card class="mb-24 shadow-sm">
                        <template #header>
                            <div class="flex items-center gap-8">
                                <span class="i-carbon-paint-brush text-20 text-brand"></span>
                                <span class="text-18 font-700">二、全局样式配置说明</span>
                            </div>
                        </template>
                        <div class="text-14 leading-relaxed space-y-16">
                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">
                                    样式文件加载顺序
                                </h3>
                                <ol class="list-decimal ml-20 space-y-8 text-13">
                                    <li>
                                        <code class="px-6 py-2 bg-gray-100 rounded"
                                            >@unocss/reset/tailwind.css</code
                                        >
                                        - CSS 重置样式
                                    </li>
                                    <li>
                                        <code class="px-6 py-2 bg-gray-100 rounded">uno.css</code>
                                        - UnoCSS 原子类
                                    </li>
                                    <li>
                                        <code class="px-6 py-2 bg-gray-100 rounded"
                                            >element-plus/dist/index.css</code
                                        >
                                        - Element Plus 基础样式
                                    </li>
                                    <li>
                                        <code class="px-6 py-2 bg-gray-100 rounded"
                                            >assets/styles/theme.css</code
                                        >
                                        - 主题变量定义
                                    </li>
                                    <li>
                                        <code class="px-6 py-2 bg-gray-100 rounded"
                                            >assets/styles/element-overrides.css</code
                                        >
                                        - Element Plus 样式覆盖
                                    </li>
                                </ol>
                            </div>

                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">CSS 变量体系</h3>
                                <div class="rounded-8 border border-gray-200 overflow-hidden">
                                    <el-tabs
                                        v-model="styleTab"
                                        type="border-card"
                                    >
                                        <el-tab-pane
                                            label="主题色"
                                            name="colors"
                                        >
                                            <div class="p-16 space-y-12">
                                                <div class="grid grid-cols-2 md:grid-cols-4 gap-12">
                                                    <div class="text-center">
                                                        <div
                                                            class="h-48 rounded-4 bg-brand mb-8"
                                                        ></div>
                                                        <div class="text-12">brand</div>
                                                        <code class="text-11 text-gray-600"
                                                            >--color-brand</code
                                                        >
                                                    </div>
                                                    <div class="text-center">
                                                        <div
                                                            class="h-48 rounded-4 bg-success mb-8"
                                                        ></div>
                                                        <div class="text-12">success</div>
                                                        <code class="text-11 text-gray-600"
                                                            >--color-success</code
                                                        >
                                                    </div>
                                                    <div class="text-center">
                                                        <div
                                                            class="h-48 rounded-4 bg-warning mb-8"
                                                        ></div>
                                                        <div class="text-12">warning</div>
                                                        <code class="text-11 text-gray-600"
                                                            >--color-warning</code
                                                        >
                                                    </div>
                                                    <div class="text-center">
                                                        <div
                                                            class="h-48 rounded-4 bg-danger mb-8"
                                                        ></div>
                                                        <div class="text-12">danger</div>
                                                        <code class="text-11 text-gray-600"
                                                            >--color-danger</code
                                                        >
                                                    </div>
                                                </div>
                                                <p class="text-13 text-gray-600">
                                                    主题色支持 50-700 的色阶，如
                                                    <code class="px-4 py-1 bg-gray-100 rounded"
                                                        >brand-50</code
                                                    >
                                                    到
                                                    <code class="px-4 py-1 bg-gray-100 rounded"
                                                        >brand-700</code
                                                    >
                                                </p>
                                            </div>
                                        </el-tab-pane>
                                        <el-tab-pane
                                            label="文字颜色"
                                            name="text"
                                        >
                                            <div class="p-16 space-y-12">
                                                <div class="space-y-8">
                                                    <div>
                                                        <span class="text-t-primary font-600"
                                                            >text-t-primary</span
                                                        >
                                                        - 主文字颜色
                                                    </div>
                                                    <div>
                                                        <span class="text-t-regular"
                                                            >text-t-regular</span
                                                        >
                                                        - 常规文字颜色
                                                    </div>
                                                    <div>
                                                        <span class="text-t-secondary"
                                                            >text-t-secondary</span
                                                        >
                                                        - 次要文字颜色
                                                    </div>
                                                    <div>
                                                        <span class="text-t-placeholder"
                                                            >text-t-placeholder</span
                                                        >
                                                        - 占位文字颜色
                                                    </div>
                                                    <div>
                                                        <span class="text-t-brand"
                                                            >text-t-brand</span
                                                        >
                                                        - 品牌色文字
                                                    </div>
                                                </div>
                                            </div>
                                        </el-tab-pane>
                                        <el-tab-pane
                                            label="背景颜色"
                                            name="bg"
                                        >
                                            <div class="p-16 space-y-12">
                                                <div class="space-y-8">
                                                    <div
                                                        class="p-12 rounded-4 bg-b-base border border-gray-200"
                                                    >
                                                        bg-b-base - 基础背景
                                                    </div>
                                                    <div
                                                        class="p-12 rounded-4 bg-b-muted border border-gray-200"
                                                    >
                                                        bg-b-muted - 次级背景
                                                    </div>
                                                    <div
                                                        class="p-12 rounded-4 bg-b-brand-soft border border-gray-200"
                                                    >
                                                        bg-b-brand-soft - 品牌色浅背景
                                                    </div>
                                                    <div
                                                        class="p-12 rounded-4 bg-b-success-soft border border-gray-200"
                                                    >
                                                        bg-b-success-soft - 成功色浅背景
                                                    </div>
                                                </div>
                                            </div>
                                        </el-tab-pane>
                                    </el-tabs>
                                </div>
                            </div>

                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">使用示例</h3>
                                <pre
                                    class="rounded-8 bg-gray-100 p-16 text-13 overflow-auto border border-gray-200"
                                ><code>// 在组件中使用 CSS 变量
&lt;style scoped&gt;
.custom-button {
  background: var(--color-brand);
  color: var(--text-inverse);
  border: 1px solid var(--border-color);
}
&lt;/style&gt;

// 使用 UnoCSS 原子类（推荐）
&lt;div class="bg-brand text-white p-16 rounded-8"&gt;
  品牌色背景按钮
&lt;/div&gt;

&lt;div class="text-t-primary bg-b-base p-16 border border-gray-200"&gt;
  使用语义化颜色类
&lt;/div&gt;</code></pre>
                            </div>
                        </div>
                    </el-card>

                    <!-- 第三部分：Type类型文件定义规范 -->
                    <el-card class="mb-24 shadow-sm">
                        <template #header>
                            <div class="flex items-center gap-8">
                                <span class="i-carbon-document text-20 text-brand"></span>
                                <span class="text-18 font-700">三、Type 类型文件定义规范</span>
                            </div>
                        </template>
                        <div class="text-14 leading-relaxed space-y-16">
                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">命名规范</h3>
                                <el-alert
                                    type="info"
                                    :closable="false"
                                    class="mb-12"
                                >
                                    <template #title>
                                        <span class="text-13"
                                            >类型文件命名规则：<code
                                                class="px-4 py-1 bg-white rounded"
                                                >文件名.type.ts</code
                                            ></span
                                        >
                                    </template>
                                </el-alert>
                                <div class="space-y-8 text-13">
                                    <p>✅ <strong>正确示例：</strong></p>
                                    <ul class="list-disc ml-20 space-y-4">
                                        <li>
                                            <code class="px-4 py-1 bg-gray-100 rounded"
                                                >base.type.ts</code
                                            >
                                            - 基础接口类型
                                        </li>
                                        <li>
                                            <code class="px-4 py-1 bg-gray-100 rounded"
                                                >user.type.ts</code
                                            >
                                            - 用户相关类型
                                        </li>
                                        <li>
                                            <code class="px-4 py-1 bg-gray-100 rounded"
                                                >order.type.ts</code
                                            >
                                            - 订单相关类型
                                        </li>
                                    </ul>
                                    <p>❌ <strong>错误示例：</strong></p>
                                    <ul class="list-disc ml-20 space-y-4">
                                        <li>
                                            <code class="px-4 py-1 bg-gray-100 rounded"
                                                >baseTypes.ts</code
                                            >
                                            - 不符合规范
                                        </li>
                                        <li>
                                            <code class="px-4 py-1 bg-gray-100 rounded"
                                                >types.ts</code
                                            >
                                            - 命名不够具体
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">类型定义规范</h3>
                                <pre
                                    class="rounded-8 bg-gray-100 p-16 text-13 overflow-auto border border-gray-200"
                                ><code>// src/server/api/base.type.ts

import type { ListResponseType, BaseListItemType } from '../global.type';

/**
 * 查询参数类型
 * 命名规范：接口名 + QueryType
 */
export interface GetTermListQueryType {
  id?: string;
  name?: string;
  codes?: string;
  year?: string;
  currentPage?: number;
  numPerPage?: number;
}

/**
 * 响应数据类型
 * 命名规范：接口名 + ResponseType
 */
export type GetTermListResponseType = ListResponseType&lt;BaseListItemType&gt;;

/**
 * 列表项类型（扩展基础类型）
 * 命名规范：接口名 + ItemType
 */
export interface TermListItemType extends BaseListItemType {
  beginDay: string;
  endDay: string;
  weekNum: number;
}

/**
 * 复杂响应类型
 */
export interface GetTerm4DayResponseType {
  beginDay: string;
  endDay: string;
  code: string;
  id: string;
  name: string;
  weekNum: number;
}</code></pre>
                            </div>

                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">
                                    在接口文件中使用
                                </h3>
                                <pre
                                    class="rounded-8 bg-gray-100 p-16 text-13 overflow-auto border border-gray-200"
                                ><code>// src/server/api/base.ts
import { formDataHttp } from "../http";
import type {
  GetTermListQueryType,
  GetTermListResponseType,
} from "./base.type";  // 从对应的 .type.ts 文件导入

const baseUrl = "/api/base";

/**
 * @description 学期查询
 */
export const getTermListAPI = (
  params?: GetTermListQueryType  // 使用类型定义
): Promise&lt;GetTermListResponseType&gt; {  // 明确返回类型
  return formDataHttp.post(`${baseUrl}/base/course/term/getTermList`, params);
};</code></pre>
                            </div>

                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">在组件中使用</h3>
                                <pre
                                    class="rounded-8 bg-gray-100 p-16 text-13 overflow-auto border border-gray-200"
                                ><code>// 组件中使用类型
import { getTermListAPI, type GetTermListQueryType } from '@/server/api/base';

const queryParams = ref&lt;GetTermListQueryType&gt;({
  currentPage: 1,
  numPerPage: 20
});

const fetchData = async () => {
  const result = await getTermListAPI(queryParams.value);
  // result 的类型已自动推断为 GetTermListResponseType
  console.log(result.list);
};</code></pre>
                            </div>
                        </div>
                    </el-card>

                    <!-- 第四部分：UnoCSS 配置说明 -->
                    <el-card class="mb-24 shadow-sm">
                        <template #header>
                            <div class="flex items-center gap-8">
                                <span class="i-carbon-settings text-20 text-brand"></span>
                                <span class="text-18 font-700">四、UnoCSS 配置说明</span>
                            </div>
                        </template>
                        <div class="text-14 leading-relaxed space-y-16">
                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">预设配置</h3>
                                <div class="space-y-12">
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8 text-15">presetUno()</div>
                                        <p class="text-13 text-gray-600">
                                            核心原子类集合，包含常用的布局、间距、颜色、排版等工具类
                                        </p>
                                        <div class="mt-12 text-13">
                                            <span
                                                class="px-8 py-4 bg-brand-100 text-brand rounded-4 mr-8"
                                                >flex</span
                                            >
                                            <span
                                                class="px-8 py-4 bg-brand-100 text-brand rounded-4 mr-8"
                                                >grid</span
                                            >
                                            <span
                                                class="px-8 py-4 bg-brand-100 text-brand rounded-4 mr-8"
                                                >p-16</span
                                            >
                                            <span
                                                class="px-8 py-4 bg-brand-100 text-brand rounded-4 mr-8"
                                                >m-12</span
                                            >
                                            <span
                                                class="px-8 py-4 bg-brand-100 text-brand rounded-4 mr-8"
                                                >rounded-8</span
                                            >
                                        </div>
                                    </div>
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8 text-15">presetAttributify()</div>
                                        <p class="text-13 text-gray-600">
                                            支持属性化写法，可以将类名作为属性使用
                                        </p>
                                        <pre
                                            class="mt-12 text-12 bg-gray-50 p-12 rounded-4 overflow-auto"
                                        ><code>&lt;div flex items-center gap-8&gt;内容&lt;/div&gt;
// 等价于
&lt;div class="flex items-center gap-8"&gt;内容&lt;/div&gt;</code></pre>
                                    </div>
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8 text-15">presetIcons()</div>
                                        <p class="text-13 text-gray-600">
                                            图标原子类，使用 Carbon 图标集
                                        </p>
                                        <div class="mt-12 text-13 flex items-center gap-12">
                                            <span class="i-carbon-rocket text-24 text-brand"></span>
                                            <code class="px-8 py-4 bg-gray-100 rounded-4"
                                                >i-carbon-rocket</code
                                            >
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">主题配置</h3>
                                <pre
                                    class="rounded-8 bg-gray-100 p-16 text-13 overflow-auto border border-gray-200"
                                ><code>// uno.config.ts
theme: {
  colors: {
    // 主题色（关联 CSS 变量）
    brand: "var(--color-brand)",
    success: "var(--color-success)",

    // 品牌色色阶
    "brand-50": "var(--color-brand-50)",
    "brand-500": "var(--color-brand-500)",

    // 语义背景色
    "b-base": "var(--bg-base)",
    "b-brand-soft": "var(--bg-brand-soft)",

    // 文字颜色
    "t-primary": "var(--text-primary)",
    "t-brand": "var(--text-brand)",
  },
  // 间距和字体大小与 rem 一一对应
  spacing: {
    "0": "0rem",
    "1": "1rem",
    "16": "16rem",  // 实际对应 16px（设计稿1920px下）
    // ...
  },
  fontSize: {
    "12": "12rem",
    "14": "14rem",
    "16": "16rem",
    // ...
  }
}</code></pre>
                            </div>

                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">
                                    常用工具类示例
                                </h3>
                                <div class="grid md:grid-cols-2 gap-16">
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8">布局</div>
                                        <div class="space-y-4 text-12">
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >flex</code
                                                >
                                                - flex布局
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >grid</code
                                                >
                                                - grid布局
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >items-center</code
                                                >
                                                - 垂直居中
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >justify-between</code
                                                >
                                                - 两端对齐
                                            </div>
                                        </div>
                                    </div>
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8">间距</div>
                                        <div class="space-y-4 text-12">
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >p-16</code
                                                >
                                                - padding 16rem
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >m-12</code
                                                >
                                                - margin 12rem
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >gap-8</code
                                                >
                                                - gap 8rem
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >space-y-16</code
                                                >
                                                - 垂直间距
                                            </div>
                                        </div>
                                    </div>
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8">颜色</div>
                                        <div class="space-y-4 text-12">
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >bg-brand</code
                                                >
                                                - 品牌背景
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >text-white</code
                                                >
                                                - 白色文字
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >text-t-primary</code
                                                >
                                                - 主文字色
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >border-brand</code
                                                >
                                                - 品牌边框
                                            </div>
                                        </div>
                                    </div>
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8">尺寸</div>
                                        <div class="space-y-4 text-12">
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >w-full</code
                                                >
                                                - 宽度100%
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >h-48</code
                                                >
                                                - 高度48rem
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >text-16</code
                                                >
                                                - 字体16rem
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >rounded-8</code
                                                >
                                                - 圆角8rem
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-card>

                    <!-- 第五部分：rem 单位说明 -->
                    <el-card class="mb-24 shadow-sm">
                        <template #header>
                            <div class="flex items-center gap-8">
                                <span class="i-carbon-ruler text-20 text-brand"></span>
                                <span class="text-18 font-700">五、rem 单位定义和使用说明</span>
                            </div>
                        </template>
                        <div class="text-14 leading-relaxed space-y-16">
                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">rem 适配原理</h3>
                                <div class="rounded-8 border border-gray-200 p-16 bg-gray-50">
                                    <p class="text-13 mb-12">
                                        项目采用基于设计稿 1920px 的 rem
                                        适配方案，确保在不同屏幕尺寸下保持一致的视觉效果。
                                    </p>
                                    <ul class="list-disc ml-20 space-y-6 text-13">
                                        <li><strong>设计稿宽度：</strong>1920px</li>
                                        <li>
                                            <strong>基准 rem：</strong>1rem = 1px（设计稿宽度下）
                                        </li>
                                        <li>
                                            <strong>最小宽度：</strong>1366px（小于此值 rem = 0.9）
                                        </li>
                                        <li>
                                            <strong>最大宽度：</strong>1920px（大于此值按比例缩放）
                                        </li>
                                        <li>
                                            <strong>超大屏：</strong>2560px 及以上 rem = 1.1-1.2
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">自动转换配置</h3>
                                <div class="space-y-12">
                                    <div>
                                        <p class="text-13 mb-8">
                                            项目配置了
                                            <code class="px-4 py-1 bg-gray-100 rounded"
                                                >postcss-pxtorem</code
                                            >
                                            插件，自动将 px 转换为 rem：
                                        </p>
                                        <pre
                                            class="rounded-8 bg-gray-100 p-16 text-13 overflow-auto border border-gray-200"
                                        ><code>// postcss.config.cjs
module.exports = {
  plugins: {
    "postcss-pxtorem": {
      rootValue: 1,           // 根字体大小，1px = 1rem
      propList: ["*"],        // 转换所有属性
      minPixelValue: 1,       // 最小转换值，<=1px 不转换
      exclude: /node_modules/i, // 排除 node_modules
    },
  },
};</code></pre>
                                    </div>
                                    <div>
                                        <p class="text-13 mb-8">
                                            rem.ts 文件会在页面加载和窗口 resize 时动态调整 html 的
                                            font-size：
                                        </p>
                                        <pre
                                            class="rounded-8 bg-gray-100 p-16 text-13 overflow-auto border border-gray-200"
                                        ><code>// src/assets/utils/rem.ts
// 当屏幕宽度变化时，自动重新计算 rem 基准值
// 1920px 宽度下：1rem = 1px
// 1366px 宽度下：1rem = 0.9px（按比例缩小）
// 2560px 宽度下：1rem = 1.1px（按比例放大）</code></pre>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">使用方式</h3>
                                <div class="space-y-12">
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8 text-15">
                                            方式一：直接使用 px（推荐）
                                        </div>
                                        <p class="text-13 text-gray-600 mb-8">
                                            在 CSS 或 style 标签中直接使用 px，会自动转换为 rem：
                                        </p>
                                        <pre
                                            class="text-12 bg-gray-50 p-12 rounded-4 overflow-auto"
                                        ><code>&lt;style scoped&gt;
.container {
  width: 1200px;      /* 自动转换为 1200rem */
  padding: 16px;      /* 自动转换为 16rem */
  font-size: 14px;    /* 自动转换为 14rem */
}
&lt;/style&gt;</code></pre>
                                    </div>
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8 text-15">
                                            方式二：使用 UnoCSS 原子类
                                        </div>
                                        <p class="text-13 text-gray-600 mb-8">
                                            UnoCSS 的数值直接对应 rem 单位：
                                        </p>
                                        <pre
                                            class="text-12 bg-gray-50 p-12 rounded-4 overflow-auto"
                                        ><code>&lt;div class="w-1200 p-16 text-14"&gt;
  <!-- w-1200 = width: 1200rem -->
  <!-- p-16 = padding: 16rem -->
  <!-- text-14 = font-size: 14rem -->
&lt;/div&gt;</code></pre>
                                    </div>
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8 text-15">
                                            方式三：直接在模板中使用 rem
                                        </div>
                                        <p class="text-13 text-gray-600 mb-8">
                                            在模板中也可以直接写 rem：
                                        </p>
                                        <pre
                                            class="text-12 bg-gray-50 p-12 rounded-4 overflow-auto"
                                        ><code>&lt;div :style="{ width: '1200rem', padding: '16rem' }"&gt;
  内容
&lt;/div&gt;</code></pre>
                                    </div>
                                </div>
                            </div>

                            <el-alert
                                type="warning"
                                :closable="false"
                            >
                                <template #title>
                                    <span class="text-13">注意事项</span>
                                </template>
                                <div class="text-13 mt-8 space-y-4">
                                    <p>• 小于等于 1px 的值不会被转换（用于细边框等场景）</p>
                                    <p>• node_modules 中的第三方库样式不会被转换</p>
                                    <p>• rem.ts 会在页面加载和窗口 resize 时自动调整基准值</p>
                                </div>
                            </el-alert>
                        </div>
                    </el-card>

                    <!-- 第六部分：HTTP 接口定义和使用说明 -->
                    <el-card class="mb-24 shadow-sm">
                        <template #header>
                            <div class="flex items-center gap-8">
                                <span class="i-carbon-api text-20 text-brand"></span>
                                <span class="text-18 font-700">六、HTTP 接口定义和使用说明</span>
                            </div>
                        </template>
                        <div class="text-14 leading-relaxed space-y-16">
                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">HTTP 实例类型</h3>
                                <div class="space-y-12">
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8 text-15">http（JSON 格式）</div>
                                        <p class="text-13 text-gray-600 mb-8">
                                            用于发送 JSON 格式的请求，Content-Type: application/json
                                        </p>
                                        <pre
                                            class="text-12 bg-gray-50 p-12 rounded-4 overflow-auto"
                                        ><code>import { http } from '@/server';

// POST 请求（自动 JSON 序列化）
const data = await http.post('/api/user', { name: '张三', age: 20 });</code></pre>
                                    </div>
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8 text-15">
                                            formDataHttp（FormData 格式）
                                        </div>
                                        <p class="text-13 text-gray-600 mb-8">
                                            用于发送 FormData 格式的请求，Content-Type:
                                            application/x-www-form-urlencoded
                                        </p>
                                        <pre
                                            class="text-12 bg-gray-50 p-12 rounded-4 overflow-auto"
                                        ><code>import { formDataHttp } from '@/server';

// POST 请求（自动 FormData 序列化）
const data = await formDataHttp.post('/api/base/list', {
  page: 1,
  size: 20
});</code></pre>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">接口定义规范</h3>
                                <pre
                                    class="rounded-8 bg-gray-100 p-16 text-13 overflow-auto border border-gray-200"
                                ><code>// src/server/api/base.ts
import { formDataHttp } from "../http";
import type {
  GetTermListQueryType,
  GetTermListResponseType,
} from "./base.type";

// 接口前缀
const baseUrl = "/api/base";

/**
 * @description 学期查询
 * @param {GetTermListQueryType} params 查询参数
 * @returns {Promise&lt;GetTermListResponseType&gt;} 返回学期列表
 */
export const getTermListAPI = (
  params?: GetTermListQueryType
): Promise&lt;GetTermListResponseType&gt; => {
  return formDataHttp.post(
    `${baseUrl}/base/course/term/getTermList`,
    params
  );
};</code></pre>
                            </div>

                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">统一错误展示</h3>
                                <div class="space-y-12">
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <p class="text-13 mb-8">
                                            使用
                                            <code class="px-4 py-1 bg-gray-100 rounded"
                                                >getErrorMessage</code
                                            >
                                            统一处理错误消息：
                                        </p>
                                        <pre
                                            class="text-12 bg-gray-50 p-12 rounded-4 overflow-auto"
                                        ><code>import { getTermListAPI, getErrorMessage } from '@/server';
import { ElMessage } from 'element-plus';

const fetchData = async () => {
  try {
    const result = await getTermListAPI({ page: 1 });
    console.log(result.list);
  } catch (error) {
    // 统一错误提示
    ElMessage.error(getErrorMessage(error));
  }
};</code></pre>
                                    </div>
                                    <div class="rounded-8 border border-gray-200 p-16 bg-gray-50">
                                        <div class="font-600 mb-8 text-14">错误码映射</div>
                                        <p class="text-13 text-gray-600">
                                            系统会自动将常见错误码映射为中文提示：
                                        </p>
                                        <ul class="list-disc ml-20 mt-8 space-y-4 text-13">
                                            <li>
                                                <code class="px-4 py-1 bg-white rounded">401</code>
                                                → "登录已过期,请重新登录"
                                            </li>
                                            <li>
                                                <code class="px-4 py-1 bg-white rounded">403</code>
                                                → "权限不足,无法访问该资源"
                                            </li>
                                            <li>
                                                <code class="px-4 py-1 bg-white rounded">404</code>
                                                → "请求的资源不存在"
                                            </li>
                                            <li>
                                                <code class="px-4 py-1 bg-white rounded">500</code>
                                                → "服务器内部错误,请稍后重试"
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">
                                    server 统一导出使用
                                </h3>
                                <div class="space-y-12">
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <p class="text-13 mb-8">
                                            <code class="px-4 py-1 bg-gray-100 rounded"
                                                >src/server/index.ts</code
                                            >
                                            统一导出所有接口和类型：
                                        </p>
                                        <pre
                                            class="text-12 bg-gray-50 p-12 rounded-4 overflow-auto"
                                        ><code>// server/index.ts 导出内容：
// - HTTP 实例：http, formDataHttp
// - 类型：ResponseType, ListResponseType 等
// - 错误处理：getErrorMessage, ErrorCode
// - 所有 API 接口：getTermListAPI 等</code></pre>
                                    </div>
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <p class="text-13 mb-8">
                                            在组件中使用，统一从
                                            <code class="px-4 py-1 bg-gray-100 rounded"
                                                >@/server</code
                                            >
                                            导入：
                                        </p>
                                        <pre
                                            class="text-12 bg-gray-50 p-12 rounded-4 overflow-auto"
                                        ><code>// 推荐：统一从 '@/server' 导入
import {
  getTermListAPI,              // API 接口
  type GetTermListResponseType, // 类型
  getErrorMessage,              // 错误处理
  http                          // HTTP 实例
} from '@/server';

// 不推荐：从具体文件导入
// import { getTermListAPI } from '@/server/api/base';</code></pre>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">完整使用示例</h3>
                                <pre
                                    class="rounded-8 bg-gray-100 p-16 text-13 overflow-auto border border-gray-200"
                                ><code>// 组件中使用 API
&lt;script setup lang="ts"&gt;
import { ref, onMounted } from 'vue';
import { getTermListAPI, getErrorMessage, type GetTermListQueryType } from '@/server';
import { ElMessage } from 'element-plus';

const loading = ref(false);
const termList = ref([]);

const queryParams = ref&lt;GetTermListQueryType&gt;({
  currentPage: 1,
  numPerPage: 20
});

const fetchTermList = async () => {
  loading.value = true;
  try {
    const result = await getTermListAPI(queryParams.value);
    termList.value = result.list;
  } catch (error) {
    ElMessage.error(getErrorMessage(error));
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchTermList();
});
&lt;/script&gt;</code></pre>
                            </div>
                        </div>
                    </el-card>

                    <!-- 第七部分：moment 库使用说明 -->
                    <el-card class="mb-24 shadow-sm">
                        <template #header>
                            <div class="flex items-center gap-8">
                                <span class="i-carbon-calendar text-20 text-brand"></span>
                                <span class="text-18 font-700">七、moment 库使用说明</span>
                            </div>
                        </template>
                        <div class="text-14 leading-relaxed space-y-16">
                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">安装和配置</h3>
                                <div class="space-y-8 text-13">
                                    <p>
                                        项目已全局配置 moment 中文本地化，在
                                        <code class="px-4 py-1 bg-gray-100 rounded">main.ts</code>
                                        中已引入：
                                    </p>
                                    <pre
                                        class="rounded-8 bg-gray-100 p-16 text-13 overflow-auto border border-gray-200"
                                    ><code>// main.ts
import moment from "moment";
import "moment/locale/zh-cn";
moment.locale("zh-cn");</code></pre>
                                </div>
                            </div>

                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">在组件中使用</h3>
                                <div class="space-y-12">
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8 text-15">
                                            方式一：按需引入（推荐）
                                        </div>
                                        <pre
                                            class="text-12 bg-gray-50 p-12 rounded-4 overflow-auto"
                                        ><code>&lt;script setup lang="ts"&gt;
import moment from 'moment';

// 格式化当前时间
const now = moment().format('YYYY-MM-DD HH:mm:ss');

// 格式化指定时间
const date = moment('2024-01-01').format('YYYY年MM月DD日');

// 格式化函数
const formatDate = (date: string) => {
  return moment(date).format('YYYY-MM-DD');
};
&lt;/script&gt;

&lt;template&gt;
  &lt;div&gt;{{ now }}&lt;/div&gt;
&lt;/template&gt;</code></pre>
                                    </div>
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8 text-15">
                                            方式二：全局挂载（Options API）
                                        </div>
                                        <p class="text-13 text-gray-600 mb-8">
                                            如需在 Options API 中使用 this.$moment，需要在 main.ts
                                            中挂载：
                                        </p>
                                        <pre
                                            class="text-12 bg-gray-50 p-12 rounded-4 overflow-auto"
                                        ><code>// main.ts
app.config.globalProperties.$moment = moment;

// 组件中使用
this.$moment().format('YYYY-MM-DD');</code></pre>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">
                                    常用格式化示例
                                </h3>
                                <div class="grid md:grid-cols-2 gap-12">
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8 text-14">日期格式化</div>
                                        <div class="space-y-4 text-12">
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >moment().format('YYYY-MM-DD')</code
                                                >
                                                → 2024-01-01
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >moment().format('YYYY年MM月DD日')</code
                                                >
                                                → 2024年01月01日
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >moment().format('YYYY/MM/DD HH:mm:ss')</code
                                                >
                                                → 2024/01/01 12:00:00
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >moment().format('YYYY-MM-DD HH:mm:ss')</code
                                                >
                                                → 2024-01-01 12:00:00
                                            </div>
                                        </div>
                                    </div>
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8 text-14">相对时间</div>
                                        <div class="space-y-4 text-12">
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >moment().fromNow()</code
                                                >
                                                → 几秒前
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >moment().subtract(1, 'day').fromNow()</code
                                                >
                                                → 一天前
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >moment().calendar()</code
                                                >
                                                → 今天 12:00
                                            </div>
                                        </div>
                                    </div>
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8 text-14">时间操作</div>
                                        <div class="space-y-4 text-12">
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >moment().add(1, 'day')</code
                                                >
                                                → 加一天
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >moment().subtract(1, 'month')</code
                                                >
                                                → 减一个月
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >moment().startOf('day')</code
                                                >
                                                → 当天开始
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >moment().endOf('day')</code
                                                >
                                                → 当天结束
                                            </div>
                                        </div>
                                    </div>
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8 text-14">时间比较</div>
                                        <div class="space-y-4 text-12">
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >moment().isBefore(date)</code
                                                >
                                                → 是否早于
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >moment().isAfter(date)</code
                                                >
                                                → 是否晚于
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >moment().isSame(date, 'day')</code
                                                >
                                                → 是否同一天
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >moment().diff(date, 'days')</code
                                                >
                                                → 相差天数
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">实际使用场景</h3>
                                <pre
                                    class="rounded-8 bg-gray-100 p-16 text-13 overflow-auto border border-gray-200"
                                ><code>// 场景1：日期选择器格式化
const formatPickerDate = (date: Date) => {
  return moment(date).format('YYYY-MM-DD');
};

// 场景2：显示相对时间
const showRelativeTime = (timestamp: number) => {
  return moment(timestamp).fromNow();
};

// 场景3：日期范围查询
const startDate = moment().startOf('month').format('YYYY-MM-DD');
const endDate = moment().endOf('month').format('YYYY-MM-DD');

// 场景4：计算年龄
const calculateAge = (birthday: string) => {
  return moment().diff(moment(birthday), 'years');
};</code></pre>
                            </div>
                        </div>
                    </el-card>

                    <!-- 第八部分：lodash 库使用说明 -->
                    <el-card class="mb-24 shadow-sm">
                        <template #header>
                            <div class="flex items-center gap-8">
                                <span class="i-carbon-tools text-20 text-brand"></span>
                                <span class="text-18 font-700">八、lodash 库使用说明</span>
                            </div>
                        </template>
                        <div class="text-14 leading-relaxed space-y-16">
                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">
                                    按需引入（推荐）
                                </h3>
                                <el-alert
                                    type="success"
                                    :closable="false"
                                    class="mb-12"
                                >
                                    <template #title>
                                        <span class="text-13"
                                            >推荐使用按需引入，减小打包体积，提升性能</span
                                        >
                                    </template>
                                </el-alert>
                                <pre
                                    class="rounded-8 bg-gray-100 p-16 text-13 overflow-auto border border-gray-200"
                                ><code>// 按需引入单个函数
import debounce from 'lodash/debounce';
import throttle from 'lodash/throttle';
import cloneDeep from 'lodash/cloneDeep';
import isEmpty from 'lodash/isEmpty';
import merge from 'lodash/merge';
import pick from 'lodash/pick';
import omit from 'lodash/omit';</code></pre>
                            </div>

                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">常用函数分类</h3>
                                <div class="grid md:grid-cols-2 gap-16">
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8 text-15">函数工具</div>
                                        <div class="space-y-4 text-12">
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >debounce</code
                                                >
                                                - 防抖
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >throttle</code
                                                >
                                                - 节流
                                            </div>
                                        </div>
                                    </div>
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8 text-15">数组操作</div>
                                        <div class="space-y-4 text-12">
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >map</code
                                                >
                                                - 映射
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >filter</code
                                                >
                                                - 过滤
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >find</code
                                                >
                                                - 查找
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >sortBy</code
                                                >
                                                - 排序
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >groupBy</code
                                                >
                                                - 分组
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >uniq</code
                                                >
                                                - 去重
                                            </div>
                                        </div>
                                    </div>
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8 text-15">对象操作</div>
                                        <div class="space-y-4 text-12">
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >cloneDeep</code
                                                >
                                                - 深拷贝
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >merge</code
                                                >
                                                - 合并
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >pick</code
                                                >
                                                - 提取属性
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >omit</code
                                                >
                                                - 排除属性
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >get</code
                                                >
                                                - 获取路径值
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >set</code
                                                >
                                                - 设置路径值
                                            </div>
                                        </div>
                                    </div>
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8 text-15">类型判断</div>
                                        <div class="space-y-4 text-12">
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >isEmpty</code
                                                >
                                                - 是否为空
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >isEqual</code
                                                >
                                                - 深度相等
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >isArray</code
                                                >
                                                - 是否数组
                                            </div>
                                            <div>
                                                <code class="px-4 py-1 bg-gray-100 rounded"
                                                    >isObject</code
                                                >
                                                - 是否对象
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <h3 class="text-16 font-600 mb-12 text-t-primary">使用示例</h3>
                                <div class="space-y-12">
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8 text-15">场景1：搜索框防抖</div>
                                        <pre
                                            class="text-12 bg-gray-50 p-12 rounded-4 overflow-auto"
                                        ><code>&lt;script setup lang="ts"&gt;
import { ref } from 'vue';
import debounce from 'lodash/debounce';

const keyword = ref('');

const search = debounce((key: string) => {
  console.log('搜索:', key);
  // 执行搜索逻辑
}, 300);

const handleInput = (e: Event) => {
  keyword.value = (e.target as HTMLInputElement).value;
  search(keyword.value);
};
&lt;/script&gt;</code></pre>
                                    </div>
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8 text-15">
                                            场景2：深拷贝表单数据
                                        </div>
                                        <pre
                                            class="text-12 bg-gray-50 p-12 rounded-4 overflow-auto"
                                        ><code>import cloneDeep from 'lodash/cloneDeep';

const formData = ref({
  name: '',
  age: 0,
  tags: []
});

// 保存初始数据
const initialData = cloneDeep(formData.value);

// 重置表单
const resetForm = () => {
  formData.value = cloneDeep(initialData);
};</code></pre>
                                    </div>
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8 text-15">场景3：数组分组</div>
                                        <pre
                                            class="text-12 bg-gray-50 p-12 rounded-4 overflow-auto"
                                        ><code>import groupBy from 'lodash/groupBy';

const users = [
  { id: 1, name: '张三', department: '技术部' },
  { id: 2, name: '李四', department: '技术部' },
  { id: 3, name: '王五', department: '产品部' }
];

// 按部门分组
const grouped = groupBy(users, 'department');
// 结果: { '技术部': [...], '产品部': [...] }</code></pre>
                                    </div>
                                    <div class="rounded-8 border border-gray-200 p-16">
                                        <div class="font-600 mb-8 text-15">
                                            场景4：对象属性提取/排除
                                        </div>
                                        <pre
                                            class="text-12 bg-gray-50 p-12 rounded-4 overflow-auto"
                                        ><code>import pick from 'lodash/pick';
import omit from 'lodash/omit';

const user = {
  id: 1,
  name: '张三',
  password: '123456',
  email: 'zhangsan@example.com'
};

// 只提取需要的字段
const publicInfo = pick(user, ['id', 'name', 'email']);

// 排除敏感字段
const safeUser = omit(user, ['password']);</code></pre>
                                    </div>
                                </div>
                            </div>

                            <el-alert
                                type="info"
                                :closable="false"
                            >
                                <template #title>
                                    <span class="text-13">提示</span>
                                </template>
                                <div class="text-13 mt-8">
                                    <p>• 优先使用按需引入，只引入需要的函数</p>
                                    <p>• TypeScript 支持良好，所有函数都有完整的类型定义</p>
                                    <p>
                                        • 如果项目使用 lodash-es，可以使用 tree-shaking 进一步优化
                                    </p>
                                </div>
                            </el-alert>
                        </div>
                    </el-card>
                </div>
            </el-main>
        </el-container>
    </el-config-provider>
</template>

<script setup lang="ts">
import { ref } from "vue";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { useTheme } from "@/composables/useTheme";

const styleTab = ref("colors");

const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
};

const { isDark, toggleTheme } = useTheme();
</script>

<style scoped>
.container {
    max-width: 1200px;
}
</style>
